<template>
  <view class="container">
    <view class="head" style="height: 450rpx">
      <u-navbar
        :is-fixed="false"
        :border-bottom="false"
        :is-back="false"
        title="个人中心"
        :background="{ background: 'transprent' }"
        title-color="#FFFFFF"
      >
      </u-navbar>
      <image
        src="/static/images/user/bg.png"
        class="head-bg"
        style="height: 450rpx"
      />

      <!-- 用户信息 -->
      <view class="user-box">
        <view class="left">
          <image src="/static/images/pic.png" class="avatar" mode=""></image>
          <!-- 手机号快捷登录/注册 -->
          <!-- <button v-if="!isLogin" class="login_btn"  open-type="getPhoneNumber" @getphonenumber="bindLogin">手机号</button> -->
          <!-- @click="$u.func.route('/pages/login/login')" -->
          <view
            v-if="!isLogin"
            class="user-name"
            @click="$u.func.route('/pages/login/login')"
            >登录 / 注册</view
          >
          <view
            v-else
            class="user-name"
            @click="$u.func.route('/pages/user/profile')"
            >{{ detail.realName || "请设置昵称" }}</view
          >
        </view>
      </view>
    </view>
	<u-toast ref="uToast" />
    <!-- 功能列表 -->
    <view class="cell-box">
      <u-cell-group :border="false">
        <u-cell-item
         v-if="detail&&detail.roleName=='逸飞管理员'"
          title="核销扫一扫"
          :border-bottom="false"
          @click="scanCode"
        >
          <image
            slot="icon"
            src="/static/images/user/c8.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item>
        <!-- <u-cell-item
         v-if="detail&&detail.roleName=='逸飞管理员'"
          title="退款扫一扫"
          :border-bottom="false"
        >
          <image
            slot="icon"
            src="/static/images/user/c8.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item> -->
        <u-cell-item
          title="个人信息"
          @click="$u.func.route('/pages/user/profile')"
        >
          <image
            slot="icon"
            src="/static/images/user/c1.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item>
        <u-cell-item
          title="订单列表"
          @click="$u.func.route('/pages/order/list')"
        >
          <image
            slot="icon"
            src="/static/images/user/c2.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item>
        <u-cell-item title="联系我们" :border-bottom="false" @click="openList">
          <image
            slot="icon"
            src="/static/images/user/c3.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item>
      </u-cell-group>
    </view>
    <u-action-sheet
      @click="openPhone"
      :list="list"
      v-model="show"
    ></u-action-sheet>
    <view class="cell-box">
      <u-cell-group :border="false">
        <u-cell-item title="退出登录" :border-bottom="false" @click="logout">
          <image
            slot="icon"
            src="/static/images/user/c8.png"
            class="icon"
            mode=""
          ></image>
        </u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  onShow: function () {
    if (uni.getStorageSync("userInfo")) {
      this.getUser();
    }
  },
  data() {
    return {
      detail: null,
      list: [
        {
          text: "18998983331",
        },
        {
          text: "17770140138",
        },
      ],
      show: false,
    };
  },
  mounted() {
  
    
  },
  methods: {
    scanCode() {
      // 允许从相机和相册扫码
      uni.scanCode({
        success: (res) => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          let id = res.result;
          this.$u.api
            .verifyOrder({ id })
            .then((result) => {
              console.log(result);
              uni.showModal({
                title: result.success?'核销成功':'核销失败',
                content: result.msg,
              });
              // let { success } = result;
              // if (success) {
              
              //   this.$refs.uToast.show({
              //     title: "成功核销",
              //     type: "success",
              //   });
              // }
            })
            .catch(() => {});
        },
      });
    },
    getUser() {
      this.$u.api.userInfo().then((data) => {
        console.log('getUser---------',data.data);
        this.detail=data.data
      });
    },
    bindLogin(e) {
      
      // uni.setStorageSync('encryptedData',e.detail.encryptedData)
      // uni.setStorageSync('iv',e.detail.iv)
      this.login(e.detail.code);
    },
    login(code) {
      let that = this;
      let wxCode = uni.getStorageSync("wxCode");
      // let encryptedData = uni.getStorageSync('encryptedData')
      // let iv = uni.getStorageSync('iv')
      var para = {
        //wxCode:wxCode,
        code: code,
        //encryptedData:encryptedData,
        //iv:iv
      };
      console.log(para);
      uni.showLoading({ title: "正在加载..." });
      this.$u.api
        .loginWechat(para)
        .then((data) => {
          if (data.code == 200) {
            if (!data.data.userName) {
              uni.showModal({
                title: "提示",
                content: "个人信息未完善，请完善",
                success: function (res) {
                  if (res.confirm) {
                    that.$u.func.login(data.data, "/pages/user/profile");
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                },
              });
            } else {
              uni.showModal({
                title: "提示",
                content: "登录/注册成功，返回首页",
                success: function (res) {
                  if (res.confirm) {
                    that.$u.func.login(data.data, this.redirect);
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                },
              });
            }
          }

          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },

    async wxlogin() {
      let that = this;
      // 获取code
      var wxlogin = await wx.login();
      if (wxlogin.code) {
        var showModel = await uni.showModal({
          title: "温馨提示",
          content: "亲，授权获取用户信息才能正常使用小程序功能",
        });
        uni.setStorageSync("wxCode", wxlogin.code);
        if (showModel && showModel[1].confirm) {
          try {
            var result = await wx.getUserProfile({
              desc: "获取你的昵称、头像用于用户登录",
            });
            if (result && result.errMsg == "getUserProfile:ok") {
              uni.setStorageSync("wxUserName", result.userInfo.nickName);
              this.loginType = true;
            }
          } catch (e) {}
        }
      } else {
        uni.hideLoading();
        console.log("登录失败！" + wxlogin.errMsg);
      }
    },
    logout() {
      this.$u.func.logout();
    },
    openList() {
      this.show = true;
    },
    openPhone(index) {
      uni.makePhoneCall({
        phoneNumber: this.list[index].text, //仅为示例
      });
    },
    noOpen() {
      uni.showToast({
        icon: "none",
        title: "敬请期待",
      });
    },
  },
};
</script>

<style lang="scss">
.login_btn {
  position: absolute;
  left: 0;
  top: 128rpx;
  width: 200rpx;
  opacity: 0.1;
  background: 0;
}
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;
}

.head {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background: #55a2f9;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }

  .head-bg {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 750rpx;
    height: 582rpx;
    background: #55a2f9;
  }
}

.user-box {
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx 0 64rpx;
  margin-top: 36rpx;

  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 128rpx;
      height: 128rpx;
      background: #ffffff;
      border-radius: 50%;
    }

    .user-name {
      margin-top: 20rpx;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }

    .tag {
      margin-top: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5rpx 16rpx;
      border: 1px solid #f5f5f5;
      border-radius: 7rpx;

      font-size: 19rpx;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #ffffff;
    }
  }

  .edit-btn {
    margin-top: 20rpx;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    width: 165rpx;
    height: 54rpx;
    border: 2rpx solid #f5f5f5;
    border-radius: 11rpx;

    font-size: 27rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}

.nav {
  display: flex;
  //border-top: 2rpx solid #7dcdd6;
  margin: 36rpx 38rpx 0;
  padding: 36rpx 0 42rpx;

  .nav-item {
    width: calc(100% / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    font-size: 25rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;

    &:not(:last-of-type) {
      position: relative;

      &::after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        display: block;
        width: 2rpx;
        background-color: #fff;
        height: 30rpx;
      }
    }

    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 6rpx;
    }
  }
}

.cell-box {
  background: #ffffff;
  margin: 18rpx;

  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 22rpx;
  }
}
</style>
